import React, { useState } from "react";
import style from "./index.module.css";
import { useNavigate } from "react-router-dom";
import { Card, Popup } from "antd-mobile";
function Index() {
  const [visible1, setVisible1] = useState(false);

  // 模拟档案数据
  const [currentPatient, setCurrentPatient] = useState({
    name: "王小柯",
    namecode: "20151234567890",
    reports: [
      {
        title: "双肾及肾血管彩色多普勒",
        time: "2020-01-01 10:20:36",
        status: "报告已出",
        statusColor: "#4A7CE8",
      },
      {
        title: "上腹部CT平扫",
        time: "2020-01-01 10:20:36",
        status: "报告已出",
        statusColor: "#4A7CE8",
      },
      {
        title: "核磁共振",
        time: "--",
        status: "报告未出",
        statusColor: "#FF4D4F",
      },
    ],
    labReports: [
      {
        title: "血常规",
        time: "2020-01-01 10:20:36",
        status: "报告已出",
        statusColor: "#4A7CE8",
      },
      {
        title: "肝功三项",
        time: "--",
        status: "报告未出",
        statusColor: "#FF4D4F",
      },
    ],
  });

  // 患者列表数据
  const patientList = [
    {
      id: 1,
      name: "王小柯",
      namecode: "20151234567890",
      reports: [
        {
          title: "双肾及肾血管彩色多普勒",
          time: "2020-01-01 10:20:36",
          status: "报告已出",
          statusColor: "#4A7CE8",
        },
        {
          title: "上腹部CT平扫",
          time: "2020-01-01 10:20:36",
          status: "报告已出",
          statusColor: "#4A7CE8",
        },
        {
          title: "核磁共振",
          time: "--",
          status: "报告未出",
          statusColor: "#FF4D4F",
        },
      ],
      labReports: [
        {
          title: "血常规",
          time: "2020-01-01 10:20:36",
          status: "报告已出",
          statusColor: "#4A7CE8",
        },
        {
          title: "肝功三项",
          time: "--",
          status: "报告未出",
          statusColor: "#FF4D4F",
        },
      ],
    },
    {
      id: 2,
      name: "李玲玲",
      namecode: "13124346575686789",
      reports: [
        {
          title: "心电图检查",
          time: "2020-02-15 14:30:20",
          status: "报告已出",
          statusColor: "#4A7CE8",
        },
        {
          title: "胸部X光片",
          time: "2020-02-15 14:30:20",
          status: "报告已出",
          statusColor: "#4A7CE8",
        },
        {
          title: "血常规检查",
          time: "2020-02-16 09:15:45",
          status: "报告已出",
          statusColor: "#4A7CE8",
        },
        {
          title: "肝功能检查",
          time: "--",
          status: "报告未出",
          statusColor: "#FF4D4F",
        },
      ],
      labReports: [
        {
          title: "尿常规",
          time: "2020-02-15 14:30:20",
          status: "报告已出",
          statusColor: "#4A7CE8",
        },
        {
          title: "血糖检测",
          time: "2020-02-16 09:15:45",
          status: "报告已出",
          statusColor: "#4A7CE8",
        },
        {
          title: "血脂四项",
          time: "--",
          status: "报告未出",
          statusColor: "#FF4D4F",
        },
      ],
    },
  ];

  // 格式化namecode：只取十位数字，中间四位变成*号
  const formatNamecode = (namecode: string) => {
    if (!namecode) return "";
    const numbers = namecode.replace(/\D/g, "");
    const tenDigits = numbers.substring(0, 10);
    if (tenDigits.length < 10) return tenDigits;
    return tenDigits.substring(0, 4) + "****" + tenDigits.substring(8);
  };

  // 选择患者
  const selectPatient = (patient: typeof currentPatient) => {
    setCurrentPatient(patient);
    setVisible1(false);
  };
  return (
    <div style={{marginTop: "10px"}}>
      <Card className={style.patientCard}>
        <div className={style.patientInfo}>
          <span className={style.patientName}>{currentPatient.name}</span>
          <span className={style.patientId}>
            {formatNamecode(currentPatient.namecode)}
          </span>
          <span className={style.switchBtn} onClick={() => setVisible1(true)}>
            <span className={style.switchIcon}>👤</span>
            切换
          </span>
        </div>
      </Card>

      <Popup
        visible={visible1}
        onMaskClick={() => setVisible1(false)}
        onClose={() => setVisible1(false)}
        position="bottom"
        bodyStyle={{ height: "40vh" }}
      >
        <div className={style.popupContent}>
          <div className={style.popupHeader}>
            <h2>选择就诊人</h2>
            <span className={style.closeBtn} onClick={() => setVisible1(false)}>
              ×
            </span>
          </div>
          <div className={style.patientList}>
            {patientList.map((patient) => (
              <div
                key={patient.id}
                className={style.patientItem}
                onClick={() => selectPatient(patient)}
              >
                <span className={style.patientName}>{patient.name}</span>
                <span className={style.patientId}>
                  {formatNamecode(patient.namecode)}
                </span>
              </div>
            ))}
          </div>
        </div>
      </Popup>
    </div>
  );
}

export default Index;
